<template>
	<div class="system-messages">
		<view class="box-bg">
			<uni-nav-bar shadow left-icon="left" title="果汁分你一半" :shadow="false" :border="false" @clickLeft="goBack" />
		</view>
		<span class="time" style="margin-top:20rpx ;display: flex;justify-content: center;">12-25 17:52</span>
		<div class="message-item">
			<div class="icon">
				<img src="https://cdn8.axureshop.com/demo2024/2251242/images/%E6%99%AF%E7%82%B9%E4%B8%BB%E9%A1%B5/u632.svg" alt="icon" class="icon-img">
			</div>
			<div class="message-content" style="background-color: white; padding: 20rpx;border-radius: 20rpx;">
				<p class="csb">你的账号在一台新设备上成功登录。如非本人操作，请及时修改密码。</p>
			</div>
		</div>
		<span class="time" style="display: flex;justify-content: center;">4天前</span>
		<div class="message-item">
			<div class="icon">
				<img src="https://cdn8.axureshop.com/demo2024/2251242/images/%E6%99%AF%E7%82%B9%E4%B8%BB%E9%A1%B5/u632.svg" alt="icon" class="icon-img">
			</div>
			<div class="message-content" style="background-color: white; padding: 20rpx;border-radius: 20rpx;">

				<p class="csb">你提交的个人信息修改申请审核已通过。你本月还有修改资料次数：用户名0次</p>
			</div>
		</div>
	</div>
</template>

<script setup>	
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style scoped>
	.system-messages {
		/* padding: 10px;s */
		/* 调整内边距 */
	}

	.message-item {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		padding: 20px;

	}

	.icon {
		margin-right: 10px;
	}

	.icon-img {
		width: 20px;
		height: 20px;
	}

	.message-content {
		flex: 1;
	}

	.time {
		color: #888;
		font-size: 12px;
		margin-left: 10px;
	}

	.csb {
		margin: 0;
		/* background-color: #ccc; */
		/* color: #fff; */
		padding: 5px;
		border-radius: 5px;
	}
</style>